import $ from 'jquery';
import SnakeGame from "@/game/game";

export function showGame () {
    mask.show (function () {
        let root = $('#game-panel').show (), W = $(window).width (), H = $(window).height ();
        let score = document.getElementById ('score'),
            level = document.getElementById ('level'),
            button = $('#start-button').removeClass ('pause').addClass ('start').text ('Start').attr ('data-action', 'start');
        SnakeGame.init ({
            canvas: 'game-canvas',
            onlevelup: function () {
                level.innerText = 'Level: ' + this.level;
            },
            ongrow: function () {
                score.innerText = this.score;
            },
            ongameover: function () {
                $('#start-button').removeClass ('pause').addClass ('start').text ('Restart').attr ('data-action', 'restart');
            },
            onRunningStateChanged : function (stopped) {
                if (stopped)
                    button.removeClass ('start').addClass ('pause').text ('Pause').attr ('data-action', 'start');
                else
                    button.removeClass ('pause').addClass ('start').text ('Start').attr ('data-action', 'pause');
            }
        });

        let w = root.width(), h = root.height ();
        root.css ({left: (W - w)/2, top: (H - h)/2});
    });
}

export function loadGame () {
    let root = $('<div id="game-panel"/>').appendTo ($(document.body));
    $('<table>\n' +
      '    <tr>\n' +
      '        <td rowspan="2"><canvas id="game-canvas"></canvas></td>\n' +
      '        <td style="color: #999; vertical-align: top; width: 150px;">\n' +
      '            <div style="font-size: 24px">Score: <span id="score">0</span></div>\n' +
      '            <div id="timer">Time: 00:00:00</div>\n' +
      '            <div id="level">Level: 1</div>\n' +
      '        </td>\n' +
      '    </tr>\n' +
      '    <tr>\n' +
      '        <td style="vertical-align: bottom; padding-bottom: 15px;">\n' +
      '            <a class="button start" id="start-button" data-action="start">Start</a>\n' +
      '            <a class="button cancel" id="cancel-button">Close</a>\n' +
      '        </td>\n' +
      '    </tr>\n' +
      '</table>').appendTo (root);
    $('#start-button').on ('click', function () {
        let self = $(this), action = self.attr ('data-action');
        switch (action) {
            case 'start':
                SnakeGame.start ();
                break;
            case 'pause':
                SnakeGame.stop ();
                break;
            case 'restart':
                SnakeGame.restart ();
                break
        }
    });
    $('#cancel-button').on ('click', function () {
        mask.hide (function () {
            SnakeGame.stop ();
            root.hide ();
        });
    });
}

let Mask = function () {
    let panel = $('.mask');
    if (!panel.length) {
        panel = $('<div class="mask"/>')
            .css ({width: $(window).width(), height: $(window).height ()})
            .hide ()
            .on ('click', function (e) { e.stopPropagation()})
            .appendTo ($(document.body))
    }

    function M () {}
    M.prototype = {
        show : function (callback) {
            panel.show ();
            callback ();
        },
        hide : function (callback) {
            panel.hide ();
            callback ();
        }
    };
    return M;
}();
const mask = new Mask ();